<template>
    <el-drawer v-model="props.drawerVisible" :before-close="handleClose" :size="1200">
        <template #header>
            <h4>查看详情</h4>
        </template>
        <template #default>
            <div>
                <el-table :data="detailsGridData" border :height="tableHeight">
                    <el-table-column prop="categoryName" label="分类名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="status" label="状态" width="60" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="voltageA" label="A相电压（V）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="voltageB" label="B相电压（V）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="voltageC" label="C相电压（V）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="currentA" label="A相电流（A）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="currentB" label="B相电流（A）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="currentC" label="C相电流（A）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="power" label="功率（W）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="frequency" label="频率（Hz）" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="timestamp" label="更新时间" width="180" show-overflow-tooltip></el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination class="mt15" v-model:current-page="pageNo" v-model:page-size="pageSize"
                    :page-sizes="[5, 7, 9, 11]" :background="true" layout="prev, pager, next, jumper,->,sizes,total"
                    :total="total" @current-change="getDetails" @size-change="handler" />
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="handleClose">取消</el-button>
                <!-- <el-button type="primary" @click="save">确定</el-button> -->
            </div>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount } from 'vue'

// 定义接收的属性类型
const props = defineProps({
    drawerVisible: {
        type: Boolean,
        required: true
    }
});
// 定义自定义事件类型
const emits = defineEmits(['closeDetails']);
const handleClose = () => {
    emits('closeDetails', false)
}

interface detailsGridDataItem {
    categoryName: string;
    deviceName: string;
    timestamp: string;
    status: string,
    voltageA: number;
    voltageB: number;
    voltageC: number;
    currentA: number;
    currentB: number;
    currentC: number;
    power: number;
    frequency: number;
    // 添加更多的字段
}
const detailsGridData = ref<detailsGridDataItem[]>([
    { categoryName: '源', deviceName: '设备1', timestamp: '2022-01-01 10:00:00', status: '正常', voltageA: 220, voltageB: 220, voltageC: 220, currentA: 5, currentB: 5, currentC: 5, power: 1100, frequency: 50 },
    { categoryName: '储', deviceName: '设备2', timestamp: '2022-01-01 10:01:00', status: '异常', voltageA: 218, voltageB: 218, voltageC: 218, currentA: 4.8, currentB: 4.8, currentC: 4.8, power: 1046, frequency: 50 },
    // 添加更多的数据项
]);
//默认页码
let pageNo = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(5);
//总个数
let total = ref<number>(0);
//获取全部已有的用户信息
const getDetails = async (pager = 1) => {
    //收集当前页码
    pageNo.value = pager;
    // let result: UserResponseData = await reqUserInfo(pageNo.value, pageSize.value, keyword.value);
    // if (result.code == 200) {
    //     total.value = result.data.total;
    //     userArr.value = result.data.records;
    // }
}
//分页器下拉菜单的自定义事件的回调
const handler = () => {
    getDetails();
}
const tableHeight = ref(0); // 表格高度
// 计算表格高度的函数
const calculateTableHeight = () => {
    const windowHeight = window.innerHeight - 120; // 获取窗口高度
    const tableHeaderHeight = 40; // 表格头部高度
    const tablePaginationHeight = 60; // 表格分页高度
    const padding = 20; // 上下边距
    tableHeight.value = windowHeight - tableHeaderHeight - tablePaginationHeight - padding;
};

// 监听窗口大小变化，动态计算表格高度
const handleResize = () => {
    calculateTableHeight();
};

onMounted(() => {
    calculateTableHeight();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
})

</script>

<style scoped></style>